<template>
  <view class="letter_container">
    <view class="letter_content">
      <view
        class="letter_box"
        v-for="(item, index) in letterList"
        :key="index"
        @click="letterChange(index)"
      >
        <text>{{ item.capital }}</text>
        <text>{{ item.lowerCase }}</text>
        <text>{{ item.partialSyllable }}</text>
      </view>
    </view>
    <view class="letter_detail">
      <view class="video">
        <video :src="currentItem.videoUrl" controls object-fit="fill"></video>
      </view>
      <view class="content">
        <view class="content_title">
          歌词
        </view>
        <view class="content_scroll">
          <scroll-view
            scroll-y="true"
            :show-scrollbar="true"
            style="height:448rpx"
          >
            <view class="content_text">
              <view class="content_text_left" v-html="currentItem.lyrics">
              </view>
              <view
                class="content_text_right"
                v-html="currentItem.groupWordsContent"
              >
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findLetterList } from "@/api/spelling";
export default {
  components: {},
  data() {
    return {
      letterList: [],
      currentIndex: 0,
    };
  },
  computed: {
    currentItem() {
      return this.letterList[this.currentIndex] || {};
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      findLetterList().then((res) => {
        this.letterList = res.data;
      });
    },
    letterChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./LetterStrengthen";
</style>
